<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core">


    <h:head>

        <title>SHUCKAPP-Cerca de mi?</title>
        <link rel="stylesheet" type="text/css" href="/Shuckapp/recursos/css/estilos.css" />
        <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript" ></script>
    </h:head>

    <h:body>

        <p:graphicImage value="/recursos/imagenes/logo_shuckapp.png" width="200px"  height="100px"/>
        <span class="title">Donde puedo comer que este cerca?</span>
        <p:panel  styleClass="cuerpo">
            <h:form id="fr_menu">

                <p:stack icon="/recursos/imagenes/icon_menu.png" expanded="true" closeSpeed="30" id="menu">
                    <c:forEach items="#{bmenuInicio.menus}" var="link">
                        <p:menuitem  value="#{link.titulo}"  url="#{link.outcome} "  icon="#{link.icon}"    />  
                    </c:forEach>

                </p:stack>
                <p:draggable for="menu"  /> 

           

            <div style=" margin-left:70%; top:10px">
                <h4 >10 metros&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100 metros</h4>
                <h:outputText id="output" value="Radio:#{mapaGPS.radio_busqueda} metros"  />
                <h:inputHidden id="txt2" value="#{mapaGPS.radio_busqueda}"  />
                <p:slider for="txt2" display="output"  minValue="10" maxValue="100"
                          style=" width:200px; "
                          displayTemplate="Radio:{value} metros" />
            </div>
   </h:form>
        </p:panel>
        <br/>
        <h:form>  
            <p:panelGrid columns="2" id="busqueda" >
                
            
            <p:gmap id="gmap" center="14.587770, -90.552672" zoom="18" type="HYBRID" model="#{mapaGPS.advancedModel}" 

                    style="width:700px; height:500px;  ">

                <p:ajax event="overlaySelect" listener="#{mapaGPS.onMarkerSelect}" />

                <p:gmapInfoWindow id="infoWindow">
                    <p:outputPanel style="text-align: center; display: block; margin: auto">

                        <h:outputText value="#{mapaGPS.marker.title}"  style=" font-style: oblique; font-size: 14pt;"/>
                        <c:set  var="cod" value="#{mapaGPS.marker.data[2]}" />
                        <c:set  var="des" value="#{mapaGPS.marker.data[0]}" />
                        <c:set  var="foto" value="#{mapaGPS.marker.data[1]}" />
                        <br />

                        <h:link outcome="f4" value="calificame">
                            <f:param name="marker" value="#{cod}" />
                        </h:link>
                        <h:outputText value="&nbsp;&nbsp;&nbsp;&nbsp;" />
                        <h:link outcome="f5" value="Menu">
                            <f:param name="marker" value="#{cod}" />
                        </h:link>

                        <hr />
                        <h:outputText value="#{des}" />
                        <br />
                        <p:graphicImage value="/recursos/imagenes/restaurantes/#{foto}" width="200px"  height="100px"/>
                    </p:outputPanel>
                </p:gmapInfoWindow>
            </p:gmap>
            
                    
                    <p:orderList    value="#{mapaGPS.match_markers}" var="marker"  controlsLocation="none"  itemLabel="#{marker}" itemValue="#{marker}" >
                        <f:facet name="caption">Restaurantes Cercanos</f:facet>
                        <p:column style="width:400px;">
            <h:outputText value="#{marker}" />
        </p:column>
                    </p:orderList>
      
            </p:panelGrid>
        </h:form>



    </h:body>

</html>
